<template>
    <div class="client">
        <el-form
            ref="formRef"
            :model="formData"
            :rules="rules"
            label-width="100px"
            :size="'default'"
            status-icon
        >
           
            <el-form-item label="客户" prop="fee_unit_cod">
                <el-select
                    v-model="formData.fee_unit_cod"
                    filterable
                    placeholder="select"
                    :clearable="true"
                >
                    <el-option
                        v-for="optionvalue in client"
                        :key="optionvalue.value"
                        :value="optionvalue.value"
                        :label="optionvalue.label"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="付款日期" prop="fee_tim">
                <el-date-picker
                    v-model="formData.fee_tim"
                    type="date"
                    :size="'default'"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="资金账号" prop="pay_typ">
                <el-select
                    v-model="formData.pay_typ"
                    filterable
                    placeholder="select"
                    :clearable="true"
                    @change="onChangeCategory"
                >
                    <el-option
                        v-for="optionvalue in category"
                        :key="optionvalue.value"
                        :value="optionvalue.value"
                        :label="optionvalue.label"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="货币" prop="currency_cod">
                <el-select
                    v-model="formData.currency_cod"
                    filterable
                    placeholder="select"
                    :clearable="true"
                    disabled
                >
                    <el-option
                        v-for="optionvalue in currency"
                        :key="optionvalue.value"
                        :value="optionvalue.value"
                        :label="optionvalue.label"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="金额" prop="amount">
                <el-input-number v-model="formData.amount" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="收付款类型" prop="fee_in_out">
                <el-select
                    v-model="formData.fee_in_out"
                    filterable
                    placeholder="select"
                    :clearable="true"
                >
                    <el-option
                        v-for="optionvalue in SelectOptionFeeInOut"
                        :key="optionvalue.value"
                        :value="optionvalue.value"
                        :label="optionvalue.label"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="成本中心" prop="fee_owner">
                <el-select
                    v-model="formData.fee_owner"
                    filterable
                    placeholder="select"
                    :clearable="true"
                >
                    <el-option
                        v-for="optionvalue in cntrOwner"
                        :key="optionvalue.value"
                        :value="optionvalue.value"
                        :label="optionvalue.label"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="付款码" prop="pay_no">
                <el-input v-model.trim="formData.pay_no"></el-input>
            </el-form-item>
            
            <el-form-item label="备注" prop="remark">
                <el-input v-model.trim="formData.remark"></el-input>
            </el-form-item>            
        </el-form>
        <div class="btn-group">
        <el-button-group>
            <el-button
                class="btn"
                type="primary"
                v-debounce="submitForm"
                size="large"
            >
                保存
            </el-button>
            <el-button
                class="btn"
                type="primary"
                v-debounce="submitAndNewForm"
                size="large"
            >
                保存并新增
            </el-button>
        </el-button-group>
    </div>
    </div>
</template>
<script setup lang="ts" name="PrePay">
import { ref, reactive, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import type { FormInstance, FormRules } from 'element-plus';
import type { PrePayModel } from '@/common/types/business';
import { Request } from '@/app/request';
import { useAppStore } from '@/store/app';
import { ValidateFieldsError } from 'async-validator';
import { omit } from 'lodash';
import { initObjectProperty } from '@/common/tools';
const formRef = ref<FormInstance>();
const formData = reactive<PrePayModel>({});
const props = defineProps<{
    data: PrePayModel;
}>();
const emit = defineEmits<{
    create: [action: PrePayModel];
    update: [action: PrePayModel];
    close: [];
}>();
const { SelectOptionFeeInOut, currency, category, client, cntrOwner, SelectOptionYN, cyCfs } = storeToRefs(useAppStore());
const rules = reactive<FormRules>({
    fee_unit_cod: [
        { required: true, message: '客户不能为空', trigger: 'blur' },
    ],
    amount: [{ required: true, message: '金额不能为空', trigger: 'blur' }],
    currency_cod: [{ required: true, message: '请输入货币', trigger: 'blur' }],
    fee_tim: [{ required: true, message: '请输入付款时间', trigger: 'blur' }],
    pay_typ: [{ required: true, message: '请输入资金账号', trigger: 'blur' }],
    fee_in_out: [
        { required: true, message: '请输入付款类型', trigger: 'blur' },
    ],
    fee_owner: [{ required: true, message: '请选择成本中心', trigger: 'blur' }],
    fee_typ_cod: [
        { required: true, message: '请选择费用类型', trigger: 'blur' },
    ],
    
});

onMounted(() => {
    Object.assign(formData, props.data);
});
const onChangeCategory = (value: any) => {
    for (let index = 0; index < category.value.length; index++) {
        const element = category.value[index];
        if (element.value === value) {
            formData.currency_cod = element['currency_cod'];
            break;
        }
    }
}
const save = async () => {
    
    const formValid = await formRef.value?.validate(
        (isValid: boolean, _invalidFields?: ValidateFieldsError) => {
            // return isValid;
        },
    );
    if (formValid) {
        if (formData.id! > 0) {
            // 修改
            const req = new Request('预付款修改', formData);
            const r = await req.post();
            if (r.code > 100) {
                emit('update', formData);
                return true;
            }
        } else {
            // 新增
            const param = omit(formData, ['id']);
            const req = new Request('预付款增加', param);
            const r = await req.post();
            if (r.code > 100) {
                emit('create', r.obj);
                return true;
            }
        }
    } else {
        return false;
    }
};
const reset = () => {
    initObjectProperty(formData);
};
const submitForm = async () => {
    const r = await save();
    if (r) {
        emit('close');
    }
};

const submitAndNewForm = async () => {
    const r = await save();
    if (r) {
        reset();
    }
};

</script>
<style lang="scss" scoped>
.client {
    margin-bottom: 20px;
    padding: 10px 10px;
    border: solid 2px var(--el-color-primary);
    box-shadow: 10px 10px 5px rgba(100, 100, 100, 0.5);
}
.bank {
    margin-bottom: 20px;
    padding-top: 10px 10px;
    border: solid 2px var(--el-color-primary);
    box-shadow: 10px 10px 5px rgba(100, 100, 100, 0.5);
}
.btn-group {
    .btn {
        margin-right: 5px;
    }
}
</style>
